import React from "react";
import style from './index.module.css'
import { Ivegetable } from "../../SpecialOffer";
import axios from "axios";
import {Imessage} from "../../SpecialOffer/DiscountItem";
import {Toast} from "antd-mobile";
const {occluder,buy,popularityItem,picture,mainContent,name,monthlySale,memberDiscount,money,shoppingCart,memberMoney,delMoney} = style

export default function LikeItem(props:Ivegetable){
    //TODO:addShoppingCart1
    async function addShoppingCart() {
        const result = await axios.put(`/api/addshoppingcart/${props._id}`)
        const message = result.data as Imessage
        if(message.acknowledged){
            Toast.show({
                content:'添加购物车成功',
                position:'top'
            })
            PubSub.publish('cartLength',message.shoppingCartLength)
        }else {
            Toast.show({
                content:'购物车中已存在',
                position:'top'
            })
        }
    }

    return (
        <li className={popularityItem}>
            <div style={{backgroundImage: `url(${props.address})`}} className={picture}/>
            <div className={mainContent}>
                <div>
                    <p className={name}>{props.name}</p>
                    {/* TODO:这里的好评统计完评论后需要修改成真实数据 */}
                    <p className={monthlySale}>月售{props.monthlySale}单 好评100%</p>
                </div>

                <div>
                    {
                        props.memberDiscount < 10 && <div className={memberDiscount}>会员{props.memberDiscount}折</div>
                    }
                    <div className={buy}>
                        <div>
                            {
                                props.memberDiscount < 10 &&
                                <p className={memberMoney}>
                                    <span>¥</span>

                                    {/* 算出会员价后的金额 */}
                                    <span>{Math.floor(props.price * (props.memberDiscount /10) * 100) /100}</span>
                                </p>
                            }
                            {/* 通过判断是否有会员打折改变类名 显示不同 */}
                            <p  className={props.memberDiscount < 10 ? delMoney : money}>
                                <span>¥</span>
                                <span>{props.price}</span>
                            </p>
                        </div>
                        <div className={shoppingCart} onClick={addShoppingCart}/>
                    </div>
                </div>
            </div>
            {
                    props.soldOut && <div className={occluder}>已售完</div>
            }
        </li>
    )
}